<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
    <div id='app'>
        <input type="text" v-model="num1">
        <select v-model="symbol">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" v-model="num2">
        <button @click="getResult(num1,num2)">=</button>
        <input type="text" v-model="result">
    </div>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                num1:'',
                num2:'',
                symbol:'+',
                result:''
            },
            methods:{
                getResult(a,b){
                    switch(this.symbol) {
                        case '+':
                        return this.result = parseFloat(a) + parseFloat(b);
                        case '-':
                        return this.result = parseFloat(a) - parseFloat(b);
                        case '*':
                        return this.result = parseFloat(a) * parseFloat(b);
                        case '/':
                        return this.result = parseFloat(a) / parseFloat(b);
                    }
                }
            }
        });
    </script>
</body>
</html>